<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0; border:0;}
ul,ol{ list-style:none;}
img{ display:block;}
#box>a{ display:block; width:30px; height:43px; position:absolute;}
.a1{ background:url(images/gg-l.jpg) no-repeat; top:130px; left:20px;}
.a2{ background:url(images/gg-r.jpg) no-repeat; top:130px; right:20px;}

#box{ position:relative; width:420px; padding:20px 50px 0 50px; margin:100px auto;
 padding-left:60px; height:400px; background:#000;}
#box ul li{ float:left; margin-top:10px; margin-left:5px;}
#box ul .li1{ margin-left:0;}
#box ul{ height:80px; overflow:hidden; width:400px;}
</style>
</head>
<script type="text/javascript">
	var a=1,b,c,d=0,j=0;
	function right(x,c){
		
		a=a+x;
		
		var b=a%8;
		if(a==0){a=8}
		
		switch(b){
			case 1:huantu('mn1')
				chuxian('li1','li2','li3','li4');
				huanyuan()
				border('li1','3px solid #f00')
				
			break;
			case 2:huantu('mn2')
				huanyuan()
				border('li2','3px solid #f00')
				
			break;
			case 3:huantu('mn3')
				huanyuan()
				border('li3','3px solid #f00')
				
			break;
			case 4:huantu('mn4')
				huanyuan()
				border('li4','3px solid #f00')
			break;
			case 5:huantu('mn5')
				xiaoshi('li1','li2','li3','li4');
				huanyuan()
				border('li5','3px solid #f00')
			break;
			case 6:huantu('mn6')
				huanyuan()
				border('li6','3px solid #f00')
			break;
			case 7:huantu('mn7')
				huanyuan()
				border('li7','3px solid #f00')
			break;
			case 0:huantu('mn8')
				huanyuan()
				border('li8','3px solid #f00')
			break;
			}
		}
		
		function aaa(a,b){
			var arr=[],sum=0;
			arr[0]=0;
			for(i=1;i<=b;i++){
				arr[i]=arr[i-1]*10+a;
				sum=sum+arr[i];
				}
				sum=sum*2-arr[b]
				alert(sum)
				
			}
		function aaaa(x,b){
			var c=0;
			for(i=0;i<b;i++){
				c=c+x*Math.pow(10,i);
				}
				return c;
			}	
		function aa(x,b){
			sum=0;
			for(i=1;i<=b;i++){
				sum=sum+aaaa(x,i)
				}
				sum=sum*2-aaaa(x,b)
				alert(sum)
			}
	
</script>

<body>

<div id="box">
	<a class="a1" onClick="right(-1)"></a>
    <a class="a2" onClick="right(1)"></a>
    <img src="images/mn1.jpg" name="tu"/>
    
    <ul>
    	<li id="li1"><a onClick="huantu('mn1')"><img  src="images/mn1.jpg" width="93"></a></li>
        <li id="li2"><a onClick="huantu('mn2')"><img src="images/mn2.jpg"  width="93"></a></li>
        <li id="li3"><a onClick="huantu('mn3')"><img src="images/mn3.jpg"  width="93"></a></li>
        <li id="li4"><a onClick="huantu('mn4')"><img src="images/mn4.jpg"  width="93"></a></li>
        <li id="li5"><a onClick="huantu('mn5')"><img src="images/mn5.jpg" width="93"></a></li>
        <li id="li6"><a onClick="huantu('mn6')"><img src="images/mn6.jpg"  width="93"></a></li>
        <li id="li7"><a onClick="huantu('mn7')"><img src="images/mn7.jpg"  width="93"></a></li>
        <li id="li8"><a onClick="huantu('mn8')"><img src="images/mn8.jpg"  width="93"></a></li>
        
    </ul>
    
   
</div>
 

</body>
<script type="text/javascript">
	function bgcolor(a,b){
		document.getElementById(a).style.background=b;
		}
	function xianshi(a){
		document.getElementById(a).style.display='block';
		}
	function border(a,b){
		document.getElementById(a).style.border=b;
		}
	function yincang(a){
	document.getElementById(a).style.display='none';
	}
</script>
<script type="text/javascript">
		
    	
		function tplj(a){
			return "images/"+a+".jpg"
			}
		function huantu(a){
			document.tu.src=tplj(a)
			var i=0;
			var j=parseInt(Math.random()*4);
		
			switch(j){
				case 0:f1();break;
				case 1:f2();break;
				case 2:f3();break;
				case 3:f4();break;
				}
			//------模糊滤镜-------------------------
			function f1(){
			i+=0.01;
			document.tu.style.filter='blur('+(1-i)*5+'px)'
			var timer=setTimeout(f1,20);
			if(i>1){clearTimeout(timer);i=0}
			}
			//------亮度调节----------------------------------
			function f2(){
			i+=0.01;
			document.tu.style.filter='brightness('+i+')'
			var timer=setTimeout(f2,20);
			if(i>1){clearTimeout(timer);i=0}
			}
			//------色调调节----------------------------------
			function f3(){
			i+=0.01;
			document.tu.style.filter='hue-rotate('+i*360+'deg)'
			var timer=setTimeout(f3,20);
			if(i>1){clearTimeout(timer);i=0}
			}
			//------透明度-----------------------------------
			function f4(){
			i+=0.01;
			document.tu.style.opacity=i
			var timer=setTimeout(f4,20);
			if(i>1){clearTimeout(timer);i=0}
			
			}
			}
	//---------------------------------------------------------------	
		
		
		
		
		
		
		
		
		function huanyuan(){
			border('li1',0);
			border('li2',0);
			border('li3',0);
			border('li4',0);
			border('li5',0);
			border('li6',0);
			border('li7',0);
			border('li8',0);
			
			}
		
		function xiaoshi(a,b,c,d,e,f,g,h,i,g,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z){
			yincang(a);
			yincang(b);
			yincang(c);
			yincang(d);
			yincang(e);
			yincang(f);
			yincang(g);
			yincang(h);
			yincang(i);
			yincang(j);
			yincang(k);
			yincang(l);
			yincang(m);
			yincang(n);
			yincang(o);
			yincang(p);
			yincang(q);
			yincang(r);
			yincang(s);
			yincang(t);
			yincang(u);
			yincang(v);
			yincang(w);
			yincang(x);
			yincang(y);
			yincang(z);
			
			}
		function chuxian(a,b,c,d,e,f,g,h,i,g,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z){
			xianshi(a);
			xianshi(b);
			xianshi(c);
			xianshi(d);
			xianshi(e);
			xianshi(f);
			xianshi(g);
			xianshi(h);
			xianshi(i);
			xianshi(j);
			xianshi(k);
			xianshi(l);
			xianshi(m);
			xianshi(n);
			xianshi(o);
			xianshi(p);
			xianshi(q);
			xianshi(r);
			xianshi(s);
			xianshi(t);
			xianshi(u);
			xianshi(v);
			xianshi(w);
			xianshi(x);
			xianshi(y);
			xianshi(z);
			
			}
		function zidonghuantu(){right(+1)}
		setInterval(zidonghuantu,3000)
		
    </script>
</html>
